<template>
  <div id="userManagePage">
    <a-input-group size="large">
      <a-row :gutter="3">
        <a-col :span="3">
          <a-input v-model:value="searchValue.username" placeholder="用户名" />
        </a-col>
        <a-col :span="3">
          <a-input
            v-model:value="searchValue.userAccount"
            placeholder="用户账户"
          />
        </a-col>
        <a-col :span="5">
          <a-button type="primary" :icon="h(SearchOutlined)" @click="onSearch">
            搜索
          </a-button>
        </a-col>
      </a-row>
    </a-input-group>
    <a-table :columns="columns" :data-source="data">
      <template #bodyCell="{ column, record }">
        <template v-if="column.dataIndex === 'avatarUrl'">
          <a-image :width="40" :src="record.avatarUrl" />
        </template>
        <template v-else-if="column.dataIndex === 'userRole'">
          <div v-if="record.userRole === 1">
            <a-tag color="#d500f9"> 管理员 </a-tag>
          </div>
          <div v-else-if="record.userRole === 2">
            <a-tag color="#ffd600"> VIP </a-tag>
          </div>
          <div v-else-if="record.userRole === 0">
            <a-tag color="#76ff03"> 用户 </a-tag>
          </div>
        </template>
        <template v-if="column.dataIndex === 'gender'">
          <div v-if="record.gender === 1">
            <a-tag color="#746ccf"> 男 </a-tag>
          </div>
          <div v-else>
            <a-tag color="#cf746c"> 女 </a-tag>
          </div>
        </template>
        <template v-if="column.dataIndex === 'userStatus'">
          <div v-if="record.userRole === 1">
            <a-tag color="#00cf1c"> 正常 </a-tag>
          </div>
          <div v-else>
            <a-tag color="#cf1c00"> 异常 </a-tag>
          </div>
        </template>
        <template v-if="column.dataIndex === 'createTime'">
          {{ dayjs(record.createTime).format("yyyy-MM-DD HH:mm:ss") }}
        </template>
        <template v-if="column.key === 'action'">
          <a-button danger @click="doDelete(record.id)">删除</a-button>
        </template>
      </template>
    </a-table>
  </div>
</template>
<script lang="ts" setup>
import { userDel, userSearch } from "@/api/user";
import { h, reactive, ref } from "vue";
import { message } from "ant-design-vue";
import { SearchOutlined } from "@ant-design/icons-vue";

import dayjs from "dayjs";

const columns = [
  {
    title: "ID",
    dataIndex: "id",
  },
  {
    title: "昵称",
    dataIndex: "username",
  },
  {
    title: "账号",
    dataIndex: "userAccount",
  },
  {
    title: "头像",
    dataIndex: "avatarUrl",
  },
  {
    title: "用户角色",
    dataIndex: "userRole",
  },
  {
    title: "性别",
    dataIndex: "gender",
  },
  {
    title: "phone",
    dataIndex: "电话",
  },
  {
    title: "邮箱",
    dataIndex: "email",
  },
  {
    title: "状态",
    dataIndex: "userStatus",
  },
  {
    title: "创建时间",
    dataIndex: "createTime",
  },
  {
    title: "操作",
    key: "action",
  },
];

interface SearchValue {
  username: string;
  userAccount: string;
}

let searchValue = reactive<SearchValue>({
  username: "",
  userAccount: "",
});

const data = ref([]);

const onSearch = () => {
  fetchData(searchValue);
};

const doDelete = async (id: string) => {
  if (!id) {
    return;
  }
  const res = await userDel(id);
  if (res.data.code === 0) {
    message.success(res.data.data ? "删除成功" : "删除失败");
    await fetchData(searchValue);
  } else {
    message.error(res.data.message);
  }
};

const fetchData = async (searchValue: SearchValue) => {
  const res = await userSearch(searchValue.username, searchValue.userAccount);
  if (res.data.data) {
    data.value = res.data.data;
  } else {
    message.error("获取数据失败！");
  }
};

fetchData(searchValue);
</script>
